<template>
  <div>
    <el-upload
      class="uploadContaier"
      :class="{ disable: disableUpload }"
      action="#"
      list-type="picture-card"
      :file-list="fileList"
      :on-preview="preview"
      :on-remove="handleRemove"
      :on-change="handleChange"
      :before-upload="beforeUpload"
      :http-request="upload"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <el-progress v-show="showPercent" :percentage="percent" style="width: 180px" />
    <el-dialog :visible.sync="showDialog" title="图片预览">
      <img :src="imgUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
//   1.引入腾讯云的api库
import COS from 'cos-js-sdk-v5'
import cloudConfig from '@/cloudConfig'
// 2. 创建腾讯云的实例
const cos = new COS(cloudConfig)
export default {
  data() {
    return {
      showDialog: false,
      showPercent: false,
      percent: 0,
      imgUrl: '',
      fileList: [],
      currentUid: ''
    }
  },
  computed: {
    disableUpload() {
      return this.fileList.length === 1
    }
  },
  methods: {
    //   显示预览
    preview(file) {
      this.showDialog = true
      this.imgUrl = file.url
    },
    // 删除图片
    handleRemove(file, fileList) {
      // 第二个参数其实就是删除后的文件列表
      // 直接覆盖当前数组即可
      this.fileList = [...fileList]
      this.showPercent = false
    },
    // 图片发生变化时触发
    handleChange(file, fileList) {
      this.fileList = [...fileList]
    },
    // 图片上传前触发 --用来校验
    beforeUpload(file) {
      // 图片的大小
      const size = 5 * 1024 * 1024
      //  格式
      const types = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png']
      if (types.indexOf(file.type) === -1) {
        this.$message.error('图片格式错误！')
        return false
      }

      if (file.size > size) {
        this.$message.error('图片不能大于5M!')
        return false
      }
      this.showPercent = true
      // 准备上传后替换 url
      this.currentUid = file.uid
      // 只有通过上面的校验  才能放行
      return true
    },
    upload(params) {
      console.log(params, '发送请求')
      // 这里是说覆盖默认上传逻辑的地方
      // 可以接受一个参数, 就是上传配置对象
      // 其中最重要其实是 params.file 文件本身

      // 3. 上传图片并处理后续问题
      cos.putObject({
        Bucket: 'zyk-1304560276', /* 必须 自己的存储桶名称*/
        Region: 'ap-guangzhou', /* 存储桶所在地域，必须字段 */
        Key: params.file.name, /* 必须 */
        StorageClass: 'STANDARD',
        Body: params.file, // 上传文件对象
        onProgress: (progressData) => {
          // 正在进行中的回调, 每次都可以拿到当前的进度
          if (this.showPercent) {
            console.log(JSON.stringify(progressData.percent))
            this.percent = Math.ceil(progressData.percent * 100)
          }
        }
      }, (err, data) => {
        // 第二个参数是回调(无论成功失败)
        // 判断上传成功
        if (!err && data.statusCode === 200) {
          this.fileList = this.fileList.map(item => {
            if (this.currentUid === item.uid) {
              item.url = 'http://' + data.Location
              item.uploadIsOk = true
            }
            return item
          })
          this.showPercent = false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.disable {
  // /deep/ .el-upload--picture-card {
  ::v-deep .el-upload--picture-card {
    display: none;
  }
}
.uploadContaier{
    ::v-deep img{
        object-fit: cover;
    }
}
</style>
